<template>
  <div class="xy-enerygy-analysis-card">
    <div class="EnergyAnalysis-head-wrapper">
      <div class="EnergyAnalysis-head">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.xy-enerygy-analysis-card {
  position: relative; 
}
.EnergyAnalysis-head-wrapper {
  padding-top: 20px;
  width: 100%;
  .EnergyAnalysis-head {
    width: calc(100% - 40px);
    padding: 0 20px 20px 20px;
    margin: 0 auto;
    height: 100%;
    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.12);
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  
  .EnergyAnalysis-head::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0066ff, #7b2cbf);
  }
}
</style>
